<!doctype html>
<html>
	<head>
		<title>jconed - test page</title>
		<script src="../../../os3jslib/liwe.js"></script>
		<script src="../../../os3jslib/object_enh.js"></script>
		<script src="../../../os3jslib/string_enh.js"></script>
		<script src="../../../os3jslib/array_enh.js"></script>
		<script src="../../../os3jslib/dom.js"></script>
		<script src="../../../os3jslib/event.js"></script>
		<script src="../../../os3jslib/utils.js"></script>
		<script src="../../../os3jslib/form.js"></script>
		<script src="../../../os3jslib/validators.js"></script>
		<script src="../../colorpicker/colorpicker.js"></script>
		<script src="../jconed.core.js"></script>
		<script src="../jconed.editor.js"></script>
		<script src="../jconed.toolbar.js"></script>
		<script src="../jconed.hover.js"></script>
		<script src="../jconed.config.js"></script>
		<script src="../buttons/common.js"></script>
		<script src="../buttons/link.js"></script>
		<script src="../buttons/style.js"></script>
		<script src="../buttons/html.js"></script>
		<script src="../buttons/font.js"></script>
		<script src="../buttons/color.js"></script>
		<script src="../buttons/image.js"></script>
		<script src="../buttons/table.js"></script>
		<script>
		function init ()
		{
			//var ed = new jconed.editor ( 'editable' );
			jconed.config.styles = {
				'header-1': 'Header 1',
				'header-2': 'Header 2',
				'header-3': 'Header 3'
			};
			jconed.replace ( '.editable', cback );
		}
		function cback ( editor )
		{
			console.debug ( 'VALUE: %s', editor.get_value () );
		}
		</script>
		<link rel="stylesheet" href="../../colorpicker/colorpicker.css" />
		<link rel="stylesheet" href="../gfx/jconed.css" />
		<style type="text/css">
		.editable {
			width : 400px;
			border: 1px solid #333;
			padding: 10px;
			margin: 10px;
		}
		.header-1 {
			font-size: 20px;
			color: red;
		}
		.header-2 {
			font-size: 16px;
			color: red;
		}
		.header-3 {
			font-size: 16px;
			color: green;
		}

		</style>
	</head>

	<body onload="init()">
		<div class="editable">
			<p>This <b>content</b> <i>should</i> be editable...</p>
			<img src="test.png" />
			<table>
				<tr>
					<th>One</th>
					<th>Two</th>
					<th>Three</th>
				</tr>
				<tr>
					<td>One</td>
					<td>Two</td>
					<td>Three</td>
				</tr>
			</table>
			<div align="right">
				Testiamo...
			</div>
		</div>
		<div class="editable">
			<p>This <b>content</b> <i>should</i> be editable...</p>
			<img src="test.png" />
		</div>
	</body>
</html>
